/**
 * Created by lichengming on 2017/6/9.
 */

var mainContentWidth = $(".ems_main_content").width();
var moveLeftOffset = 0;
var moveRightOffset = 0;

var OFFSET = 100;

var moveLeftArray = [];
var moveRightArray = [];

$(function () {


    //点击最左侧tab按钮
    $(".tab_direction_backward").on("click",function () {
        forward(moveLeftArray.pop());
    })

   //点击最右侧tab按钮
    $(".tab_direction_forward").on("click",function () {
        backward(false,moveRightArray.pop());
    })

    //窗口尺寸发生变化时回掉，改变mainContentWidth
    window.onresize = function () {
        mainContentWidth = $(".ems_main_content").width();
    }

    //首页点击事件
    tabEvent($(".ems_tab_div:first"));
})

function tabEvent(tab) {

    //点击删除按钮
    tab.find("i").on("click",function (event) {

        var parent = $(this).parent();
        var preTab = parent.prev();
        var tabId = parent.attr("tab-id");
        //var width = parent.width();

        parent.remove();
        $(".ifm-div[tab-id="+tabId+"]").remove();

        event.stopPropagation();

        //删除元素后，自动向右移动
        //var moveOffset = width + OFFSET;
        //moveLeftArray.splice($.inArray(moveOffset,moveLeftArray));
        forward(moveLeftArray.pop(),true);

        //选中前一个
        preTab.click();

        //跳转到前一个页面
        $(".ifm-div[tab-id="+preTab.attr("tab-id")+"]").show().siblings().filter(".ifm-div").hide();
    });

    tab.on("click",function() {
        //改变样式
        $(this).addClass("tab_active")
            .siblings().removeClass("tab_active");

        //展示选中的iframe
        var tabId = $(this).attr("tab-id");
        var clickObj = $("#home_page");
        if (tabId) {
            clickObj = $(".ifm-div[tab-id="+tabId+"]");
        }
        clickObj.show().siblings().filter(".ifm-div").hide();
    });
}

function addTab(tabName,tabId) {

    var tabWidth =  $(".ems_main_content_tab_float").width();

    $(".ems_main_content_tab_float").append('<div class="ems_tab_div" tab-id='+tabId+'>'+tabName+'<i class="glyphicon glyphicon-remove-circle"></i></div>')

    var lastTab = $(".ems_tab_div:last");
    tabEvent(lastTab);

    var lastTabLength = lastTab.width();

    //tabWidth是随着Tab的加入，宽度不断变化的，tabWidth-moveLeftOffset = 当前窗口可见的tabWidth长度。
    //现在假设一个Tab的宽度最大不会超过(OFFSET + 40(右侧按钮)) ,如果再加上
    if (tabWidth - moveLeftOffset + (lastTabLength + OFFSET) < mainContentWidth) {
        return;
    }


    //判断移动位移，如果没有向右移动，则使用指定OFFSET常量，如果向右偏移了，则偏移moveRightOffset(保证能见到最新的tab)
    var offset = moveRightOffset > 0 ? moveRightOffset : (lastTabLength + OFFSET);
    //如果向右偏移了，因为要往左走，所以要将moveRightOffset重置为0
    moveRightOffset = 0;
    backward(true,offset);

}

function backward(auto,offset) {
    console.log("moveRightOffset:" + moveRightOffset)
    //如果没有向右偏移，且是手动出发偏移（点击最右边的按钮），则不进行便宜，因为还有足够的空间
    if (moveRightOffset <= 0 && !auto) return;
    $(".ems_main_content_tab").animate({left:'-=' + offset+ 'px'});
    moveLeftOffset += offset;
    moveLeftArray.push(offset);

    //如果存在右移offset，当向左移移动时，moveRightOffset减少相应的offset
    if (moveRightOffset >= offset) moveRightOffset -= offset;
}


function forward(offset,isDelete) {

    //如果是删除操作，且已经有右偏移位移，则减掉对应的位移
    if (isDelete) {
        console.log("moveRightOffset:" + moveRightOffset + ",offset:" + offset);
        if (moveRightOffset >= offset) moveRightOffset -= offset;
    }

    //如果没有左移位移，当点击左侧按钮时，不进行移动
    if (moveLeftOffset <= 0) return;
    $(".ems_main_content_tab").animate({left: '+=' + offset + 'px'});
    moveLeftOffset -= offset;

    //如果是删除元素导致右移的，则moveRightOffset不能变，因为此时整个tab不会超出最右边
    //如果不是删除操作，则添加上对应的位移
    if (!isDelete) {
        moveRightOffset += offset;
        moveRightArray.push(offset)
    }
}

